
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/5/8
  Time: 8:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div data-xhq="xhq-caigou">

    <%--${billState}${SupplierInfo}--%>
   <!-- row1 - 新增按钮和删除按钮 -->
   <div class="row" style="margin: 15px 0 0 0;">
      <div class="col-5 row">

         <button class="col-2 btn btn-primary " data-xhq="cgdd-add"
                 type="button" data-toggle="" data-target="">
            新增
         </button>

         <button class="col-2 btn btn-danger" data-xhq="cgdd-shanChu-button" type="button" data-toggle="" data-target="" style="margin-left: 20px;">
            删除
         </button>

         <button class="col-2 btn btn-warning" data-xhq="cgdd-tiJiao-button" type="button"
                 <%--data-toggle="modal" data-target="#cgdd-tjMod"  --%>
                 style="margin-left: 20px;">
            提交
         </button>

      </div>
   </div>

   <form action="" href="" data-xhq="cgdd-select-from">

      <!-- row-2 - 查询信息的代码块 -->
      <div class="row" style="margin-top: 5px ;">
         <div class="col-12 row">
            <!-- 请输入单号输入框 -->
            <div class="input-group col-2">
               <input class="form-control" type="text" name="orderNo" value="" placeholder="请输入单号" />
            </div>

            <!-- 请选择单据状态选择框 -->
            <div class="input-group col-2">
               <select class="custom-select form-control" id="cgdd-djzt" name="stateId">
                  <option selected value="-1">请选择单据状态</option>
                   <c:forEach items="${billState}" var="obj">
                       <option value="${obj['id']}">${obj['billStateName']}</option>
                   </c:forEach>
               </select>
            </div>

            <!-- 请输入物品名称输入框 -->
            <div class="input-group col-2">
               <input class="form-control" type="text" name="goodsName" id="" value="" placeholder="请输入物品名称" />
            </div>

            <!-- 供应商类型选择框 -->
            <div class="input-group col-2">
               <select class="custom-select form-control" id="cgdd-gys" name="supplierId">
                  <option selected value="-1">请选择供应商</option>
                   <c:forEach items="${SupplierInfo}" var="SupplierInfo">
                       <option value="${SupplierInfo['id']}">${SupplierInfo['supplierName']}</option>
                   </c:forEach>
               </select>
            </div>

            <!-- 供应商类型选择框 -->
            <div class="input-group col-2">
               <select class="custom-select form-control" id="cgdd-cgy">
                  <option selected>请选择采购员</option>
               </select>
            </div>
         </div>
      </div>

      <!-- row3 - 日期和查询重置按钮的代码块-->
      <div class="row" style="margin-top: 5px ;" >

         <div class="col-6 row form-group no-gutters">
            <div class="col-7 input-group">
               <div class="input-group-prepend">
                    <span class="input-group-text">
                       <span class="fa fa-calendar-o"></span>
                    </span>
                  <!-- 开始日期和结束日期输入框 -->
               </div>
               <input type='text' class="form-control pickadate" placeholder="开始日期" name="minTime" style="border-right: 0px solid red; border-le: 0px solid red; height: 37.47px;"/>
               <span class="input-group-text" style="border-radius: 0; border: 2px solid white; border-left: none;border-right: none;">-</span>
               <input type='text' class="form-control pickadate" placeholder="结束日期" name="maxTime" style="border-left: 0px solid red;  height: 37.47px;"/>
            </div>
         </div>

         <div class="col-1"></div>

         <div class="col-5 row justify-content-end  no-gutters" >
            <button class="col-2 btn btn-primary mr-3" data-xhq="cgdd-chaXun-button" type="button" data-toggle="" data-target="" style="height: 37px;">
               查询
            </button>
            <button class="col-2 btn btn-danger " data-xhq="cgdd-chongZhi-button" type="button" data-toggle="" data-target="" style=" height: 37px;">
               重置
            </button>
         </div>

      </div>

   </form>

   <!-- row4 - 表格的代码块-->
   <div class="">
      <div class="row">
         <div class="col">
            <div data-xhq-table="cgdd-table">
            </div>
         </div>
      </div>
   </div>
</div>


<script src="${pageContext.request.contextPath}/app-assets/js/components-modal.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/app-assets/js/popover.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/js/xhq/cgdd.js" type="text/javascript"></script>

<script>

    // 每次进来时格式化临时数据
    $.getGDD("cgddMainTableData").temp = {};
    $.getGDD("cgddMainTableData").data = {};

    // 匿名函数
    (function (initTable,initEvent) {
        initTable();
        initEvent();
    })(
        function initTable() {
            // 加载时间的插件
            eval(getCalendar());

            // 获取 servlet 传过来的数据
            let tempdata = ${requestScope.pageVO};
            // 获取需要的方法
            let dataProcess =  $.getGDD("xhq-dataProcess");
            // 将数据代入方法得到处理后的数据
            let data = dataProcess(tempdata);

            // 列名
            let col = [
                {field: "orderNo", title: "采购编号"},
                {field: "documentsState", title: "单据状态"},
                {field: "tradeName", title: "物品"},
                {field: "money", title: "金额"},
                {field: "strTime", title: "创建时间"},
                {field: "remarks", title: "备注"}
            ];

            let table = {
                node : '[data-xhq-table="cgdd-table"]',
                columns: col,
                pageVO : data,
                key : 'orderNo',
                isEdit : true,
                isChecked : true,
                isPaging : true,
                click : function (tr,columns,tempData) {
                    console.log('点击了行数据');

                    if(tr === false || tr === 'false'){
                        $.getGDD("cgddMainTableData").temp = {};
                    }else{
                        // 创建一个用于存储临时格式化后的数据集合
                        let tempdatas = {};

                        // 循环遍历 tr 节点 tempData 是对象
                        for (let temp in tempData){
                            // 因为憨批春给了我可能有没定义值的对象，所以需要判断值
                            if(tempData[temp] === undefined){
                                continue;
                            }
                            // 获取到 tr 节点
                            let temptr =  tempData[temp];
                            // 获取到上面的主键 key 值
                            let key = $(temptr).attr('data-key');
                            // let key = $(temptr).attr('data-key');
                            tempdatas[key] = getObj(temptr,columns)
                        }

                        $.getGDD("cgddMainTableData").temp = tempdatas;
                    }

                },
                // 设置图标
                fontAwesome:{'ft-edit':'编辑' ,  'ft-check-square' : '审核',
                    'ft-log-out' : '确认采购', 'ft-eye':'详情', 'ft-trash-2' : '删除'},
                // 给每个图标设置监听
                fontAwesomeClick : {
                    '详情' : function (ev,rowData,i,tr) {
                        console.log('点击了详情');

                        $(this).addMianbao("cgddDetail.html","采购订单详情",rowData);
                    },
                    '编辑' : function (ev,rowData,i,tr) {
                        rowData.reqType = "编辑";

                        console.log('点击了编辑');
                        $(this).addMianbao('xhqCgddUpdata', '采购单编辑',function (node, href) {
                            $.get(href,rowData,function (res) {
                                node.html(res);
                            });
                        });


                    },'审核' : function (ev,rowData,i,tr) {
                        rowData.reqType = "审核";

                        console.log('点击了审核');
                        $(this).addMianbao('cgddDetail.html', '采购单审核',rowData);

                    },'确认采购' : function (ev,rowData,i,tr) {
                        rowData.reqType = "确认";

                        console.log('点击了确认采购')
                        $(this).addMianbao('cgddDetail.html', '采购单确认',rowData);

                    },'删除' : function (ev,rowData,i,tr) {
                        console.log('点击了删除');
                        let orderNo = rowData.orderNo;

                        swal({
                            title: '是否确认要删除该订单?',
                            text: "【"+orderNo+"】",
                            type: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#0CC27E',
                            cancelButtonColor: '#FF586B',
                            confirmButtonText: '删除',
                            cancelButtonText: "取消"
                        }).then(
                            function (isConfirm) {
                                //删除订单
                                if (isConfirm) {

                                    $.get('xhqCgddDelete',{orderNo: orderNo},function (res) {
                                        if(res.code === '200'){
                                            swal(
                                                '删除成功!',
                                                '',
                                                'success'
                                            );
                                            $('#refreshThisNav').trigger('click');
                                        }else{
                                            swal(
                                                '删除失败!',
                                                '',
                                                'error'
                                            );
                                        }
                                    },'json');


                                }
                            }).catch(swal.noop);

                    }
                },
                clickPageBefore: function(tempdata,res){
                    // console.log('点击分页前调用的方法');

                    // 渲染复选框 ，根据数据的
                    let temps = $.getGDD("cgddMainTableData").temp;
                    let datas = $.getGDD("cgddMainTableData").data;
                    for (let key in temps){
                        let value = temps[key];
                        datas[key] = value;
                    }
                    $.getGDD("cgddMainTableData").temp = {};


                    // 格式化物品数据的步骤
                    // 将
                    let tempdata1 = ${requestScope.pageVO};
                    let dataProcess =  $.getGDD("xhq-dataProcess");
                    let data = dataProcess(tempdata.pageVO);
                    return tempdata;

                },
                clickPage : function (options) {
                    // 点解分页时候调用的方法
                    cgddHuiDiaoFun(options,$(options.node));
                },
                callBack:cgddHuiDiaoFun };

            // 唐狗贼的表格封装
            firstTable(table);

            // 添加表格反复使用
            if($.getGDD('cgddMainTable') === null || $.getGDD('cgddMainTable') === undefined){
                $.addGDD("cgddMainTable",{table});
            }

            /**
             * 采购订单的回调函数
             * 给 ... 设置监听 点击可进入详情
             * 将图标进行渲染，根据流程码 来删除不需要的 图标
             */
            function cgddHuiDiaoFun(dataOrigin,tableNode) {
                // 这是给表格内容区的 wup 。。。 设置监听的
                aInfoEvent();

                // 添加物品详情的监听
                // console.log('调用了回调函数');
                let data = dataOrigin.pageVO.data;
                let columns = dataOrigin.columns;

                // 将状态码的流程绑定到 tr 上
                $(tableNode).find('tr').each(function (index,node) {
                    // tr 从 1 开始遍历，0 为列头
                    if(index > 0){
                        // 获取我的 key 值
                        let orderNo = getObj(node,columns).orderNo;
                        // 遍历我的 data 数据
                        for (let temp of data){
                            // 如果表格的节点上存在我的真实数据
                            if(orderNo === temp.orderNo){
                                // 首先将状态流程设置进
                                $(node).attr('stateId',temp.stateId);

                                // 判断状态码并对操作的图标进行筛选
                                let stateId = temp.stateId;
                                switch (stateId) {
                                    case 1:
                                        // 待提交(1) - （修改 - 删除 - 详情）
                                        removeTitleIcon(node,['编辑','删除','详情']);
                                        break;
                                    case 2:
                                        // 待审核(2) - （审核 - 详情）
                                        removeTitleIcon(node,['审核','详情']);
                                        break;
                                    case 3:
                                        // 审核拒绝(3) - （编辑 - 详情）
                                        removeTitleIcon(node,['编辑','详情']);
                                        break;
                                    case 4:
                                        // 待确认(4) - （确认 - 详情）
                                        removeTitleIcon(node,['确认采购','详情']);
                                        break;
                                    case 5:
                                        // 已完成(5) - （详情）
                                        removeTitleIcon(node,['详情']);
                                        break;
                                }

                            };
                        }
                    }
                });

                // 导包悬浮显示的 js 包
                $('s').html('\<script src=\"${pageContext.request.contextPath}\/app-assets\/js\/popover.js\"\/\>');
            }

            /**
             * 用来清除表格每行尾部的节点图标，符合 array 数组里的名称保留，node 为 tr
             */
            function removeTitleIcon(node,array) {

                // 在 节点上获取 a 图标的节点进行遍历
                $(node).find('td a[title]').each(function () {
                    // 保存节点上的图标的别名
                    let title = $(this).attr('title');
                     let boo = false;

                     // 循环需要保留的数组，如果存在则设置状态为 true，代表该 a 的节点不用删除
                    for (let temp of array){
                        if(temp === title){
                            boo = true;
                            break;
                        }
                    }
                     // 如果不存在需要保留的数组中则直接remove
                    if(!boo){
                        this.remove();
                    }
                });
            }
            
            /**
             * 用来将物品展示的 ... 绑定跳转详情的监听
             */
            function aInfoEvent() {
                $('a[data-xhq=\'cgdd-wp\' ]').off('click');
                $('a[data-xhq=\'cgdd-wp\' ]').on('click',function (ev) {
                    // 阻止默认操作
                    ev.preventDefault();
                    let dataKey = $(this).closest('tr').attr('data-key');
                    $(this).addMianbao("cgddDetail.html","采购订单详情",{'orderNo':dataKey});
                });
            }

        },

        function initEvent() {
            // 点击新增按钮触发的跳转事件
            $('[data-xhq="cgdd-add"]').on('click', function() {
                $(this).addMianbao('xhqCgdd.html', '新增采购订单');
            });

            // 点解提交时触发的方法
            $('[data-xhq="cgdd-tijiao"]').on('click',function () {

               // 获取到临时数据的采购订单id
               let temp = $.getGDD('cgddMainTableData').temp;

            });

            // 点击查询时触发的方法
            $('[data-xhq="cgdd-chaXun-button"]').on('click',function (e) {
                console.log('点击了查询');

                // 将 form中的数据序列化
                let $formSer = $(this).closest('form').serialize();

                // 如果 stateId 选择的是 -1 则清除掉不发送
                if($formSer.indexOf("&stateId=-1")>-1){
                    let str = "";
                    str = $formSer.substr(0,$formSer.indexOf("&stateId=-1"))
                        + $formSer.substr($formSer.indexOf("&stateId=-1")+ "&stateId=-1".length);
                    $formSer = str;
                }
                // 如果 supplierId 选择的是 -1 则清除掉不发送
                if($formSer.indexOf("&supplierId=-1")>-1){
                    let str = "";
                    str = $formSer.substr(0,$formSer.indexOf("&supplierId=-1"))
                        + $formSer.substr($formSer.indexOf("&supplierId=-1")+ "&supplierId=-1".length);
                    $formSer = str;
                }

                // 向 servlet 发送数据请求
                $.post('cgdd.html',$formSer,function (res) {

                    // 获取格式化数据需要的方法
                    let dataProcess =  $.getGDD("xhq-dataProcess");
                    // 将数据代入方法得到处理后的数据
                    let data = dataProcess(res.data);
                    let table =  $.getGDD('cgddMainTable');
                    // 将格式化后的数据对 table 进行赋值操作
                    table['table']['pageVO'] = data;

                    // 表格渲染刷新
                    firstTable(table['table']);

                },'json');

            });

            // 点击重置时触发的方法
            $('[data-xhq="cgdd-chongZhi-button"]').on('click',function (e) {
                // data-xhq="cgdd-select-from"
                console.log('点击了重置');
                  console.log(               );
                $(this).closest('form').find('input[name]').val("");
                $(this).closest('form').find('select[name]').find('option[value="-1"]').each(function () {
                    $(this)[0].selected = true;
                })
            });

            // 点击删除触发的方法
            $('[data-xhq="cgdd-shanChu-button"]').on('click',function (e) {
                console.log('点击删除触发的方法');

                let  str = "";
                let  order = "";
                let data = $.getGDD("cgddMainTableData").temp;

                // 拼接临时数据选择的数据
               for (let temp in data){
                   str += "【"+temp+"】";
                   order += temp+",";
               }

               if(str.length > 0 ){
                   swal({
                       title: '是否确认一键删除以下所有订单?',
                       text: str,
                       type: 'warning',
                       showCancelButton: true,
                       confirmButtonColor: '#0CC27E',
                       cancelButtonColor: '#FF586B',
                       confirmButtonText: '删除',
                       cancelButtonText: "取消"
                   }).then(
                       function (isConfirm) {

                           let data = {
                               orderNo: order,
                               type: "delete"
                           };
                           let formSer = "";
                           for (let temp in data){
                               formSer+="&"+temp+"="+data[temp];
                           }

                           $.get('xhqCgddDelete',formSer,function (res) {
                               if(res.code === '200'){
                                   swal(
                                       '删除成功!',
                                       '',
                                       'success'
                                   );
                                   $('#refreshThisNav').trigger('click');
                               }else{
                                   //
                                   swal(
                                       res.message,
                                       res.data,
                                       'error'
                                   );
                               }
                           },'json');
                       }
                   ).catch(swal.noop);
               }else{
                   swal({
                       title: '没有找到要删除的订单',
                       text: str,
                       type: 'question',
                       showCancelButton: false,
                       confirmButtonColor: '#0CC27E',
                       // cancelButtonColor: '#FF586B',
                       confirmButtonText: 'OK',
                       // cancelButtonText: "取消"
                   }).then(
                   ).catch(swal.noop);
               }
            });

            // 点击提交触发的方法
            $('[data-xhq="cgdd-tiJiao-button"]').on('click',function (e) {

                let  str = "";
                let  order = "";
                let data = $.getGDD("cgddMainTableData").temp;

                // 拼接临时数据选择的数据
                for (let temp in data){
                    str += "【"+temp+"】";
                    order += temp+",";
                }

                if(str.length > 0 ){

                    swal({
                        title: '是否确认一键提交以下所有订单?',
                        text: str,
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#0CC27E',
                        cancelButtonColor: '#FF586B',
                        confirmButtonText: '提交',
                        cancelButtonText: "取消"
                    }).then(
                        function (isConfirm) {

                            let data = {
                                orderNo: order,
                                type: "submit"
                            };
                            let formSer = "";
                            for (let temp in data){
                                formSer+="&"+temp+"="+data[temp];
                            }

                            $.get('xhqCgddDelete',formSer,function (res) {
                                if(res.code === '200'){
                                    swal(
                                        '提交成功!',
                                        '',
                                        'success'
                                    );
                                    $('#refreshThisNav').trigger('click');
                                }else{
                                    swal(
                                        res.message,
                                        res.data,
                                        'error'
                                    );
                                }
                            },'json');
                        }
                    ).catch(swal.noop);

                }else{
                    swal({
                        title: '没有找到要提交的订单',
                        text: str,
                        type: 'question',
                        showCancelButton: false,
                        confirmButtonColor: '#0CC27E',
                        confirmButtonText: 'OK',
                    }).then(
                    ).catch(swal.noop);
                }

            });

        }
    );
</script>


